<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title>我的返利</title>
		<link rel="stylesheet" href="__PUBLIC__/Home/css/common.css">
		<link rel="stylesheet" href="__PUBLIC__/Home/css/main.css">
		<script src="__PUBLIC__/Home/js/zepto.js"></script>
		<script src="__PUBLIC__/Home/js/iscroll-probe.js"></script>
		<script src="__PUBLIC__/Home/js/delIOS_huitan.js"></script>
		<style>
			/*下拉加载样式*/ 
			#wrapper {
				position: absolute;
				z-index: 1;
				top: 0;
				bottom: 0;
				left: 0;
				width: 100%;
				overflow: hidden;
			}
			#loadBin{color: #5d5d5d;text-align: center;line-height: 30px;}
		</style>
	</head>
	<body onLoad="onload()" class="box">
		<!--正文区域-->
		<div id="myFanliTop" class="topBackTitle">
			<div class="contain maxWidth">
				<div class="top1">
					<a class="hz back" href="/Member">&#xe600;</a>我的返利<!--<a href="/Member" class="hz search">&#xe607;</a>-->
				</div>
				<div class="top2">
					<ul class="clear">
						<li <if condition="$status eq 0">class="active"</if>><a href="__URL__/rebatelist">等待返利</a></li>
						<li <if condition="$status eq 1">class="active"</if>><a href="/Member/Index/rebatelist/status/1">已返利</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div id="myFanliMain" class="fastscroll">
			<div class="contain maxWidth">
				<div id="wrapper" class="maxWidth">
					<div>
						<!--等待返利 已返利 公用一个ul-->
						<ul class="list ullistlr2line">
						<volist name="list" id="item">
							<li>
								<div class="clear top">
									<p class="left danhao">
										订单号{$item.order_sn}
									</p>
									<p class="right price">
										+&yen;<span>{$item.money}</span>
									</p>
								</div>
								<div class="clear">
									<p class="left">{$item.day}</p>
									<p class="right">{$statusarr[$item['status']]}</p>
								</div>
							</li>
						</volist>
						</ul>
						<div id="loadBin"></div>
					</div>
				</div>
			</div>
		</div>

		<script>
			//返回按钮
			$('#myFanliTop .back').on('tap',function(){
				// window.history.go(-1);
				location.href='/Member';
			});

			//iscroll 下拉加载+zeptoajax
			function onload(){
				loadBin = document.getElementById("loadBin");
				myScroll = new IScroll('#wrapper',{
					probeType: 3,
					click:true
				});
				myScroll.on("scroll",scrollFun);
				myScroll.on("scrollEnd",scrollEndFun);
			}

			var page=1;
			var myScroll,
				loadBin,
				isload = false,
				scrollFun = function(){
					if((this.y - this.maxScrollY)>>0 < -50){
						isload = true;
						loadBin.innerHTML = "松开手指加载更多";
						myScroll.refresh();
						myScroll.off("scroll",scrollFun);
					}
				},
				scrollEndFun = function(){
					if(isload){
						isload = false;
						if(currIndex==0){
							//我的返利等待返利
							$.ajax({
								type: 'GET',
								url: 'data/我的返利等待返利.html',
								dataType: 'json',
								success: function(data){
									page++;
									for(var i=0;i<data.lists.length;i++){
										$('#wrapper .list').append('<li><div class="clear top"><p class="left danhao">订单号'+data.lists[i].dingdanNum+'</p><p class="right price">+&yen;<span>'+data.lists[i].money+'</span></p></div><div class="clear"><p class="left">'+data.lists[i].time+'</p><p class="right">'+data.lists[i].state+'</p></div></li>');
									}
									loadBin.innerHTML = "";
									myScroll.on("scroll",scrollFun);
									myScroll.refresh();
								},
								error: function(xhr, type){
									console.log('Ajax error!');
								}
							});
						}else if(currIndex==1){
							//我的返利已返利
							$.ajax({
								type: 'GET',
								url: 'data/我的返利已返利.html',
								dataType: 'json',
								success: function(data){
									page++;
									for(var i=0;i<data.lists.length;i++){
										$('#wrapper .list').append('<li><div class="clear top"><p class="left danhao">订单号'+data.lists[i].dingdanNum+'</p><p class="right price">+&yen;<span>'+data.lists[i].money+'</span></p></div><div class="clear"><p class="left">'+data.lists[i].time+'</p><p class="right">'+data.lists[i].state+'</p></div></li>');
									}
									loadBin.innerHTML = "";
									myScroll.on("scroll",scrollFun);
									myScroll.refresh();
								},
								error: function(xhr, type){
									console.log('Ajax error!');
								}
							});
						}
					}
				};

			//点击 导航的li
			var currIndex=0;//默认是在第一个tab上
			$('#myFanliTop .top2 li').on('tap',function(){
				currIndex=$(this).index();
				$(this).addClass('active').siblings().removeClass('active');

				$('#wrapper .list').html('');//清空内容

				//切换tab的时候，让滚动条在顶部
				myScroll._translate(0,0);//查看源码，里面提供方法

				page=1;
				if(currIndex==0){
					//我的返利等待返利
					$.ajax({
						type: 'GET',
						url: 'data/我的返利等待返利.html',
						dataType: 'json',
						success: function(data){
							page++;
							for(var i=0;i<data.lists.length;i++){
								$('#wrapper .list').append('<li><div class="clear top"><p class="left danhao">订单号'+data.lists[i].dingdanNum+'</p><p class="right price">+&yen;<span>'+data.lists[i].money+'</span></p></div><div class="clear"><p class="left">'+data.lists[i].time+'</p><p class="right">'+data.lists[i].state+'</p></div></li>');
							}
							myScroll.refresh();
						},
						error: function(xhr, type){
							console.log('Ajax error!');
						}
					});
				}else if(currIndex==1){
					//我的返利已返利
					$.ajax({
						type: 'GET',
						url: 'data/我的返利已返利.html',
						dataType: 'json',
						success: function(data){
							page++;
							for(var i=0;i<data.lists.length;i++){
								$('#wrapper .list').append('<li><div class="clear top"><p class="left danhao">订单号'+data.lists[i].dingdanNum+'</p><p class="right price">+&yen;<span>'+data.lists[i].money+'</span></p></div><div class="clear"><p class="left">'+data.lists[i].time+'</p><p class="right">'+data.lists[i].state+'</p></div></li>');
							}
							myScroll.refresh();
						},
						error: function(xhr, type){
							console.log('Ajax error!');
						}
					});
				}
			});
		</script>
	</body>
</html>